<template>
  <div class="index-container">
    <el-drawer v-model="dialogFormVisible" size="30%" @close="close">
      <template #header>
        <h4>{{ title }}</h4>
      </template>
      <template #default>
        <el-form
          ref="formRef"
          label-width="80px"
          :model="baseForm"
          :rules="rules"
        >
          <el-form-item label="账号" prop="sourcefrom">
            <el-radio-group v-model="radio1">
              <el-radio value="1">自动生成账号</el-radio>
              <el-radio value="2">绑定已有账号</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="sourcefrom">
            <div class="page-listnotice">
              <div class="titles">
                <vab-icon icon="information-line" />
                须知
              </div>
              <p class="content">电风扇的点点滴滴地方大三大发啥打法手打</p>
            </div>
          </el-form-item>

          <el-form-item label="相亲状态">
            <el-select placeholder="客户婚况" style="width: 240px">
              <el-option
                v-for="item in statusArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="pay-button-group">
          <el-button type="primary" @click="submitForm('formRef')">
            保存
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script>
  export default defineComponent({
    name: 'EntryDrawer',

    setup() {
      const state = reactive({
        formRef: null,
        baseForm: {
          status: '',
        },
        title: '',
        dialogFormVisible: false,
        statusArr: [
          {
            value: '1',
            label: '公开相亲',
          },
          {
            value: '2',
            label: '私密相亲',
          },
          {
            value: '3',
            label: '停止相亲',
          },
          {
            value: '4',
            label: '已经脱单',
          },
        ],
      })

      const showEntry = () => {
        state.title = '一键入库'
        state.dialogFormVisible = true
      }

      const submitForm = async () => {}

      return {
        ...toRefs(state),
        showEntry,
        close,
        submitForm,
      }
    },
  })
</script>

<style scoped lang="scss">
  .page-listnotice {
    width: 100%;
    padding: 5px;
    background-color: #f3f5ff;
    border: 1px solid #ced5f7;
    border-radius: 6px;
    .titles {
      font-weight: 600;
      color: #333;
      i {
        color: #5f78ed;
      }
    }
    .content {
      padding: 0;
      margin: 0;
      color: #333;
    }
  }
</style>
